<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Dijit Tree Test</title>

	<style type="text/css">
		@import "../../themes/claro/document.css";
		@import "../css/dijitTests.css";
	</style>

	<!-- required: a default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../dojo/dojo.js"
		data-dojo-config="parseOnLoad: true, isDebug: true"></script>

	<!-- not needed, for testing alternate themes -->
	<script type="text/javascript" src="../_testCommon.js"></script>

	<script type="text/javascript">
		dojo.require("dojo.data.ItemFileWriteStore");
		dojo.require("dijit.dijit"); // optimize: load dijit layer

		dojo.require("dijit.Tree");
		dojo.require("dijit.tree.ForestStoreModel");

		dojo.require("dijit.ColorPalette");

		dojo.require("dijit.Menu");
		dojo.require("dijit.MenuItem");
		dojo.require("dijit.PopupMenuItem");

		dojo.require("dojo.parser");	// scan page for widgets and instantiate them
	</script>

</head>
<body class="claro" role="main">

	<h1 class="testTitle">Dijit Tree Test</h1>

	<div data-dojo-id="continentStore" data-dojo-type="dojo/data/ItemFileWriteStore" data-dojo-props='url:"../_data/countries.json"'></div>
	<div data-dojo-id="continentModel" data-dojo-type="dijit/tree/ForestStoreModel" data-dojo-props='store:continentStore, query:{type:"continent"},
		rootId:"continentRoot", rootLabel:"Continents", childrenAttrs:["children"]'></div>

	<h2>Tree with hardcoded root node (not corresponding to any item in the store)</h2>
	<p>
		Clicking a folder node will open/close it (openOnclick==true),
		and clicking a leaf node will log a message to the console.
	</p>
	<div id="mytree" data-dojo-type="dijit/Tree" data-dojo-props='model:continentModel, openOnClick:true, onLoad:function(){ console.log("loaded mytree (first tree)"); }'>
		<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="item">
			console.log("Execute of node " + continentStore.getLabel(item)
				+", population=" + continentStore.getValue(item, "population"));
		</script>
		<script type="dojo/method" data-dojo-event="onOpen" data-dojo-args="item">
			console.log("Open of node " + continentStore.getLabel(item)||"root");
		</script>
		<script type="dojo/method" data-dojo-event="onClose" data-dojo-args="item">
			console.log("Close of node " + continentStore.getLabel(item)||"root");
		</script>
	</div>

	<button onclick="dijit.byId('mytree').destroyRecursive();">destroy</button>

	<h2>A rootless tree (no "continents" node) with context menus, and custom icons</h2>


	<div id="tree2" data-dojo-type="dijit/Tree" data-dojo-props='model:continentModel, showRoot:false, openOnClick:true,onLoad:function(){ console.log("loaded tree2 (second tree)"); }'>
		<script type="dojo/method" data-dojo-event="getIconClass" data-dojo-args="item, opened">
           return (item == this.model.root || continentStore.getValue(item, "type") == "continent") ?
                   (opened ? "customFolderOpenedIcon" : "customFolderClosedIcon") :
                    "noteIcon";
		</script>
		<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="item">
			console.log("Execute of node " + this.model.getLabel(item)
				+", population=" + continentStore.getValue(item, "population"));
		</script>
	</div>

	<ul id="tree_menu" data-dojo-type="dijit/Menu"
			data-dojo-props='style:"display: none;", targetNodeIds: ["tree2"], selector: ".dijitTreeNode"'>
		<li data-dojo-type="dijit/MenuItem">
			<script type="dojo/connect" data-dojo-event="onClick">
				// get a hold of the dijit.TreeNode that was the source of this open event
				var tn = dijit.byNode(this.getParent().currentTarget);

				// now print the data store item that backs the tree node
				console.debug("menu click for item: ", tn.item.name);
			</script>
			Click Me
		</li>
	</ul>

	<button onclick="dijit.byId('tree2').expandAll();">expand all</button>
	<button onclick="dijit.byId('tree2').collapseAll();">collapse all</button>

	<h2>Double click, expand on load, direct style setting, tooltip test</h2>
	<p>
		Double-Clicking a folder node will open/close it (openOnDblClick==true),
		and clicking or Double Clicking a leaf node will log a message to the console.
	</p>
	<div id="mytree3" data-dojo-type="dijit/Tree" data-dojo-props='store:continentStore, query:{type:"continent"},
		label:"Continents", openOnClick:false, openOnDblClick:true,
		autoExpand:true, onLoad:function(){ console.log("loaded mytree3 (third tree)"); }'>
		<script type="dojo/method" data-dojo-event="getLabelStyle" data-dojo-args="item,opened">
			if(item && continentStore.getValue(item,"type") == "continent"){
				return {color: "red"};
			}else{
				return {color: "green"};
			}
		</script>
		<script type="dojo/method" data-dojo-event="getIconStyle" data-dojo-args="item,opened">
			if(item && continentStore.getValue(item,"type") == "continent"){
				return {
					backgroundImage: "url('../images/flatScreen.gif')",
					height: "32px",
					width: "32px"
				};
			}else{
				return null;
			}
		</script>
		<script type="dojo/method" data-dojo-event="getIconClass" data-dojo-args="item, opened">
	       if(!item || continentStore.getValue(item, "type") != "continent")
				return (!item || this.model.mayHaveChildren(item)) ? (opened ? "dijitFolderOpened" : "dijitFolderClosed") : "dijitLeaf"
	       	else
	       		return "";
		</script>
		<script type="dojo/method" data-dojo-event="getTooltip" data-dojo-args="item,opened">
			return item && ("Tooltip for " + this.model.getLabel(item));
		</script>
		<script type="dojo/method" data-dojo-event="onDblClick" data-dojo-args="item">
			console.log("Execute of node " + this.model.getLabel(item)
				+", population=" + continentStore.getValue(item, "population"));
		</script>
	</div>

	<h2>Tree w/horizontal scroll</h2>
	<p>
		For checking that selection and highlighting effect goes all the way to the right.
	</p>
	<p>
		Expand North America and check highlighting for United States, plus shorter labels.
		Then collapse North America and make sure horizontal scrollbar disappears.
	</p>
	<p>
		Also check whether the Tree's initial display is correct.
		Since the Tree persists, try refreshing the page when the tree is in an open state, and when it's in a closed
		state.
	</p>
	<div id="thinTree" style="width: 170px; border: solid 1px #759dc0"
		 data-dojo-type="dijit/Tree" data-dojo-props="model:continentModel">
		<script type="dojo/aspect" data-dojo-advice="after" data-dojo-method="_adjustWidths">
			console.log(this.id + ": adjusted widths of nodes");
		</script>
	</div>
	<button onclick="dijit.byId('thinTree').expandAll();">expand all</button>
	<button onclick="dijit.byId('thinTree').collapseAll();">collapse all</button>
	<button onclick="dijit.byId('thinTree').set('paths', [['continentRoot','AF'],['continentRoot','NA','US']]);">
		set paths to Africa, US
	</button>
	<button onclick="continentStore.fetchItemByIdentity({identity: 'US', onItem: function(item){ continentStore.setValue(item, 'name', 'A very very very long name for USA'); }});">
		set long name for USA
	</button>
	<button onclick="continentStore.fetchItemByIdentity({identity: 'US', onItem: function(item){ continentStore.setValue(item, 'name', 'USA'); }});">
		set short name for USA
	</button>


</body>
</html>
